<template>
	<view>
		<view class="container u-skeleton">
			<Back />
			<view class="header"></view>
			<text class="header-title u-skeleton-rect">收藏</text>
			<view class="column-container">
				<view v-for="(item, index) in collectList.picbooks" :key="index">
					<view class="column-long fonts u-skeleton-fillet " @tap="toPicbook(item)" hover-class="touch" hover-start-time="0" hover-stay-time="300">
						<view class="image"><ImageLoad :src="item.coverUrl" /></view>
						<view class="content">{{ item.title }}</view>
					</view>
				</view>
			</view>
			<view class="column-container">
				<view v-for="(item, index) in collectList.courses" :key="index">
					<view class="column-long fonts u-skeleton-fillet " @tap="toCourse(item)" hover-class="touch" hover-start-time="0" hover-stay-time="300">
						<view class="image"><ImageLoad :src="item.coverUrl" /></view>
						<view class="content">{{ item.name }}</view>
					</view>
				</view>
			</view>
			<view class="column-container">
				<view v-for="(item, index) in collectList.trail" :key="index">
					<view class="column-long fonts u-skeleton-fillet " @tap="toTrail(item)" hover-class="touch" hover-start-time="0" hover-stay-time="300">
						<view class="image"><ImageLoad :src="item.coverUrl" /></view>
						<view class="content">{{ item.name }}</view>
					</view>
				</view>
			</view>
		</view>
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>

<script>
export default {
	data() {
		return {
			loading: true,
			collectList: {
				picbooks: [{}, {}, {}],
				courses: [],
				trail: []
			}
		}
	},
	onShareAppMessage() {
		return {
			title: '孩子的认知优势，决定孩子的未来。赶紧测一测吧！',
			path: '/pages/topic/topic',
			imageUrl: ''
		}
	},
	onLoad() {
		this.loadData()
	},
	methods: {
		loadData: async function() {
			const [data, err] = await this.awaitWarp(this.$post(this.api.loadCollectList, { deviceUuid: this.deviceUuid }))
			this.collectList.picbooks = data.collects.filter(item => {
				return item.type === 'picbook'
			})
			this.collectList.courses = data.collects.filter(item => {
				return item.type === 'course'
			})
			this.collectList.trail = data.collects.filter(item => {
				return item.type === 'trail'
			})
			this.loading = false
		},
		toPicbook: async function(item) {
			uni.showLoading({
				title: '正在加载',
				mask: true
			})
			const [data, err] = await this.awaitWarp(this.$post(this.api.loadPicbookData, { picbookId: item.id }))
			uni.hideLoading()
			if (err) {
				uni.showToast({
					title: '网络异常',
					icon: 'none',
					duration: 2000
				})
				return
			}
			this.$Router.push({ name: 'picbook', query: { item: JSON.stringify(data.picbook) } })
		},
		toCourse: function(item) {
			this.$Router.push({ name: 'courseDetail', query: { item: JSON.stringify(item) } })
		},
		toTrail: async function(item) {
			uni.showLoading({
				title: '正在加载',
				mask: true
			})
			const [data, err] = await this.awaitWarp(this.$post(this.api.listQuestions, { phase: item.phase, module: 'trail' }))
			uni.hideLoading()
			if (err) {
				uni.showToast({
					title: '网络异常',
					icon: 'none',
					duration: 2000
				})
			}
			const questions = data.questions.sort(function() {
				return Math.random() - 0.5
			})
			this.$Router.push({ name: 'assignment', query: { questions: JSON.stringify(questions) } })
		}
	}
}
</script>

<style scoped lang="stylus">
.container
	width 100vw
	height auto
	min-height 100vh
	display flex
	flex-direction column
	background white
	padding-bottom 60rpx
	.header
		width 750rpx
		height 320rpx
		background url('http://hz-huibenxia.oss-cn-shenzhen.aliyuncs.com/Static-library/yingxiao/homeTop.png') 0 0 / 100% 100%
		position absolute
	.header-title
		color white
		font-size 55rpx
		width fit-content
		font-weight 600
		margin 10vh 0 0 40rpx
		text-shadow 2rpx 2rpx 2rpx #EFBC34
		z-index 1
	.column-container
		width 670rpx
		height auto
		margin 0 auto
		display flex
		flex-wrap wrap
		justify-content space-between
		.column-long
			width 670rpx
			height 400rpx
			border-radius 30rpx
			overflow hidden
			transform translate3d(0, 0, 0)
			box-shadow 0 0 50rpx #909399
			transition all 0.3s
			font-size 35rpx
			position relative
			margin 20rpx 0
			.image
				height 320rpx
			.content
				width 100%
				height 80rpx
				display flex
				align-items center
				justify-content center
				color #7B2300
</style>
